<!-- 此文件为二开表单组件的示例 -->

<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId"
  >
    <template v-if="!field.options.hiddenField">
      <span @click="text" style="color: red">{{ abc }}</span>
      <el-input
        ref="fieldEditor"
        v-model="fieldModel"
        v-show="!isReadMode"
        :disabled="field.options.disabled"
        :readonly="field.options.readonly"
        :size="field.options.size"
        class="hide-spin-button"
        :type="inputType"
        :style="{ 'font-size': `${field.options.fontSize}px`, 'font-family': `${field.options.fontFamily}` }"
        :show-password="field.options.showPassword"
        :placeholder="field.options.placeholder"
        :clearable="field.options.clearable"
        :minlength="field.options.minLength"
        :maxlength="field.options.maxLength"
        :show-word-limit="field.options.showWordLimit"
        @focus="handleFocusCustomEvent"
        @blur="handleBlurCustomEvent"
        @input="handleInputCustomEvent"
        @change="handleChangeEvent"
      >
        <template #prefix v-if="field.options.prefixIcon">
          <component style="width: 15px; height: 15px" :is="field.options.prefixIcon" />
        </template>
        <template #suffix v-if="field.options.suffixIcon">
          <component style="width: 15px; height: 15px" :is="field.options.suffixIcon" />
        </template>
        <template #append v-if="field.options.appendButton">
          <el-button
            :disabled="field.options.disabled || field.options.appendButtonDisabled"
            @click="emitAppendButtonClick"
          >
            <el-icon>
              <component :is="field.options.buttonIcon" />
            </el-icon>
          </el-button>
        </template>
      </el-input>
      <template v-if="isReadMode">
        <span class="readonly-mode-field">{{ fieldModel }}</span>
      </template>
    </template>
  </form-item-wrapper>
</template>

<script>
const FormItemWrapper = tyRoot.tyGetMixinResource(
  'form-designer/extension/form-designer/rewrite-field-widget/form-item-wrapper.vue'
);
const InputWidget = tyRoot.tyGetMixinResource(
  'form-designer/components/form-designer/form-widget/field-widget/input-widget.vue'
);

export default {
  name: 'input-widget-rewrite',
  extends: InputWidget,
  data() {
    return {
      abc: '我是二开的组件'
    };
  },
  components: { FormItemWrapper },
  mounted() {
    alert(123);
  },
  methods: {
    text() {
      alert(3);
    }
  }
};
</script>

<style lang="scss" scoped></style>
